<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div id="people">	
	<select id="prate" name="prate">
		<option selected="selected" value="1">일반인</option>
		<option value="2">청소년</option>
	</select>
	<div id="pbtn">
		<c:forEach var="i" begin="1" end="8">			
			<input type="button" class="btn btn-default ppp" id="pbtn${i}" readonly="readonly" value="${i}"
					onclick="chkpeople('${i}')" />
		</c:forEach>		
	</div>
</div>
<div>
      	<div id="screen">s c r e e n</div>
      	<div id="seatboxes">
      	<img src="images/abc.png" id="abcimg" />      	     	
      		<c:forEach var="i" end="0" items="${seats}">      		
       			<input type="hidden" name="h_shno" id="h_shno" value="${i}" />
	       	</c:forEach>
	       	<c:forEach var="i" begin="1" end="15" items="${seats}" varStatus="s">   		
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('A${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
	       	<br />
	       	<c:forEach var="i" begin="16" end="30" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('B${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="31" end="45" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('C${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="46" end="60" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('D${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="61" end="75" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('E${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="76" end="90" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('F${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="91" end="105" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('G${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="106" end="120" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('H${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="121" end="135" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('I${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="136" end="150" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('J${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="151" end="165" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('K${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
	       	<c:forEach var="i" begin="166" end="180" items="${seats}" varStatus="s">
	       		<c:if test="${i eq 'o'}">	       			
	       			<input type="text" id="s${i}${j}" class="seatsbox selok" disabled="disabled" readonly="readonly" value="${s.count}"
	       			onclick="chkseat('L${s.count}')" />
	       		</c:if>
	       		<c:if test="${i eq 'x'}">
	       			<input type="text" class="seatsbox selno" disabled="disabled" value="${s.count}" />
	       		</c:if>
	       	</c:forEach>
      		<br />
      	<input type="hidden" id="h_seatnum" />
      	</div>
      	<div id="rbtn">
		<!-- <button type="button" id="rsrvbtn" class="btn btn-primary" onclick="sendseatinfo()">예 매</button> -->
		<button type="button" id="rsrvbtn" class="btn btn-primary" onclick="rsrv()">예 매</button>
		</div>			
</div>
<form name="seatFrm" id="seatFrm">
	<input type="hidden" name="reservshno" id="reservshno" />
	<input type="hidden" name="reservseat" id="reservseat" />
	<input type="hidden" name="reservpeople" id="reservpeople" />
	<input type="hidden" name="reservprate" id="reservprate" value="1" />
</form>	

<script>
$(".seatsbox").click(function(){
	$(this).addClass("selected");
	$(this).attr("disabled", "disabled");
});
var seatCnt = 0;
var people = "1";
var infoVal = "";
var price = 0;
$("#prate").change(function(){
	prate = $(this).val();
	$("#reservprate").val(prate);
});
function chkpeople(id) {
	$("#reservpeople").val(id);
	people = id;
	$(".ppp").removeClass("active");
	$("#pbtn"+id).addClass("active");
	$(".selok").addClass("selover");
	$(".selok").removeAttr("disabled");
	$(".selok").removeClass("selected");
	$("#reservseat").val("");
	infoVal = "";
	seatCnt = 0;
}


function chkseat(id) {
	infoVal += "|" + id;
	$("#reservseat").val(infoVal);
	$("#reservshno").val($("#h_shno").val());
	++seatCnt;
	if (seatCnt == people) {
		$(".seatsbox").attr("disabled", "disabled");
		$(".selok").removeClass("selover");
	}
}

/* function sendseatinfo(){
	var frm = document.getElementById("seatFrm");
	frm.action = "GetSeatInfo";
	frm.method = "post";
	frm.submit();
} */

function rsrv(){
	var reqAjax = $.ajax({
		url: "rsrvok.bi", 
		type: "GET", 
		data: { shno: $("#reservshno").val(),
				seat: $("#reservseat").val(),
				people: $("#reservpeople").val(),
				prate: $("#reservprate").val() }
	});
	reqAjax.done(function(result){
		$(".modal-body *").remove();
		$(result).appendTo(".modal-body");
	});
	reqAjax.fail(function (jqXHR, status){
		alert("error : " + status);
	});
};
</script>



